<template>
  <div class="searchHistory-container">
    <!-- 搜索历史标题  -->
    <van-cell title="搜索历史">
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <template>
        <div class="right" v-if="isdel">
          <span @click="history.splice(0)">全部删除</span>
          <span @click="isdel=false">完成</span>
        </div>
        <van-icon @click="isdel=true" name="delete-o" v-else/>
      </template>
    </van-cell>
    <!-- /搜索历史标题  -->

    <van-cell @click="onClickHistoryItem(i)" :title="item" v-for="(item,i) in history" :key="item">
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <template>
        <van-icon name="delete-o" v-if="isdel"/>
      </template>
    </van-cell>
  </div>
</template>

<script>
export default {
  name: 'Search-history',
  props: {
    history: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      isdel: false
    }
  },
  methods: {
    onClickHistoryItem (i) {
      if (this.isdel) {
        this.history.splice(i, 1)
      } else {
        this.$emit('search', this.history[i])
      }
    }
  }
}
</script>

<style scoped lang='less'>
.searchHistory-container {
  .van-cell {
    .right {
      span:nth-child(2) {
        margin-left: 8px;
      }
    }
  }
}
</style>
